<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="/admin/utils/handlebars/handlebars.js"></script>
	</head>
	<body>
		<div id="container">
		    <div 
			{{#mmm name}} 
			style="color: #f00;"
			{{/mmm}}
			
			 > </div>
			
			{{#switch name}} 
			   {{#case 0}}
			      <li><img src="/Content/totem/images/0.png" alt="" height="200" width="200" /></li>
			   {{/case}}
			   {{#case 1}}
			      <li><img src="/Content/totem/images/1.png" alt="" height="200" width="200" /></li>
			   {{/case}}
			   {{#case 2}}
			      <li><img src="/Content/totem/images/2.png" alt="" height="200" width="200" /></li>
			   {{/case}}
			{{/switch}}
		</div>
		<!-- Include Handlebars from a CDN -->
		
		<script>
			Handlebars.registerHelper('switch', function(value, options) {
			  this.switch_value = value;
			  return options.fn(this);
			});
			
			Handlebars.registerHelper('mmm', function(value, options) {
			  return options.fn(this);
			});
			
			Handlebars.registerHelper('case', function(value, options) {
			  if (value == this.switch_value) {
			    return options.fn(this);
			  }
			});
		  //预编译模板
		  var template = Handlebars.compile($('#container').html());
		  //模拟json数据
		  var context = {name: 15445};
		  
		  //匹配json内容
		  var html = template(context);
		  //输入模板
		  $('#container').html(html);
		  
		  
		</script>

	</body>
</html>
